<template>
	<view class="bgIndex " :style="{ '--bg-image': `url(${daziBg1})` }">
		<!-- <view :style="{ height: heightSystemss*2 + 'rpx' }"></view> -->
		<!-- 		<sunui-navbar v-if="tabList.length>=1" :items="tabList" lineHeight="70rpx" :isCenter="false"
			:currentIndex="currentIndex" padding="12rpx" activeColor="#000000" :size="65" activeLineBg="#785DF6"
			textAlign="center" activeLineWidth="100%" activeDirection="space-between" activeLineHeight="6rpx"
			bgColor="transparent" :margin="10" @change="e=>getChange(e,tabList[e].id)"></sunui-navbar> -->
		<view class="padding20">
			<liu-slide-img :list="listPoster" :autoplay="autoplay" :interval="interval"
				@click="clickSlideImg"></liu-slide-img>
			<view class="margin-bottom_20rpx">

			</view>
			<view class="flex-between margin-top_20rpx margin-bottom_20rpx" style="margin-top: 20rpx;">
				<view class="flex-align-center">
					<view class=" line">

					</view>
					<view class="font-weight">
						今日推荐
					</view>
				</view>
				<view style="color: #999999;font-size: 26rpx;" @click="viewMoreFn()">
					查看更多
					<uni-icons color="#999" type="right" size="15"></uni-icons>
				</view>
			</view>
			<view class="tabsPosition">
				<v-tabs v-model="cIndex" :tabs="tabs" @classifyListNav=classifyListNav :lineHeight="rpxNumber50+'rpx'"
					:pillsBorderRadius="rpxNumber+'rpx'" bgColor="transparent" line-height="0" activeColor="#fff"
					:pills="pillsBol" @change="e=>changeTab(e,tabsList[e].id)" fontSize="28rpx"></v-tabs>

				<view class="flex-end sortPosition" style="color:#1a1a1a" @click="sortFn()">
					排序
					<uni-icons color="#1a1a1a" type="down" size="15"></uni-icons>
				</view>

			</view>
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<view class="serviceList" v-for="(item,index) in list" :key="index" @click.stop="goDeatilFn(item)">
					<view class="flex-between ">
						<view class="container">
							<image class="orderImg" :src="item.content_img" mode="aspectFill">

							</image>

							<view v-if="item.describe_speech" class="tape flex-around"
								@click.stop="palyAudioFn(item.describe_speech,index)">
								<image v-if="(!isPaly||!(currentIndexMp3==index))" class="playerImg" :src="suspend"
									mode="aspectFill"></image>
								<image v-else class="playerImg" src="../../static/组合 1574.png" mode="aspectFill">
								</image>

								<view class="audio">
									<view :class="!(!isPaly||!(currentIndexMp3==index))?'wave':'waveOne'"></view>
									<view :class="!(!isPaly||!(currentIndexMp3==index))?'wave':'waveOne'"></view>
									<view :class="!(!isPaly||!(currentIndexMp3==index))?'wave':'waveOne'"></view>
									<view :class="!(!isPaly||!(currentIndexMp3==index))?'wave':'waveOne'"></view>
									<view :class="!(!isPaly||!(currentIndexMp3==index))?'wave':'waveOne'"></view>
									<view :class="!(!isPaly||!(currentIndexMp3==index))?'wave':'waveOne'"></view>
								</view>
								<text class="">
									{{currentIndexMp3==index?(duration?duration:'-'):'-'}}s
								</text>
							</view>
						</view>


						<view class="margin-left_16rpx flex-columns" style="width: 442rpx;height: 293rpx;">
							<view class=" font-weight margin_10rpx_0 flex-between">

								<!-- <view class="flex-start-center">
									<view class="topMounted flex" v-if="item.is_top==1">
										<text>顶置</text>
									</view>
									<view class="font-overflow font-weight font30" style="width:100%;margin-left: 8rpx;">
										{{item.title}}
									
									
									</view>
								</view> -->
								<view class="flex-between" style="width: 442rpx;">
									<view class="font-overflow font32  " style="max-width: 300rpx;">
										<view class="flex-start-center">
											<view class="topMounted flex" v-if="item.is_top==1">
												<text>顶置</text>
											</view>
											<view class="font-overflow font-weight font30">
												{{item.title}}


											</view>
										</view>
										<!-- 	<image v-if="item.sex==2" class="addImg" :src="sexNv" mode="aspectFit">
										</image>
										<image v-if="item.sex==1" class="addImg" :src="sexNan" mode="aspectFit">
										</image> -->
									</view>

									<view class="flex-start-center ">
										<view class="location flex" v-if="item.distance_kilometer">
											<image class="addressImg" :src="dwBlue" mode=""></image>
											<text>{{item.distance_kilometer}}km</text>
										</view>
										<!-- <view class="point">
									
										</view>
										<text>在线</text> -->
									</view>
								</view>

							</view>
							<view class="flex-between">
								<view class=" font-overflow flex-start-center" style="max-width: 350rpx;">

									<view class="" v-for="(content,index) in item.labelList" :key="index">

										<view class="tagTitleOrange  flex">
											{{content}}
										</view>
									</view>


								</view>
								<image class="addImg" :src="addicon" mode="aspectFit"></image>
							</view>
						<view class="font-overflow margin-top_10rpx flex-start " style="max-width: 400rpx;">
							<text style="color: rgb(153, 153, 153);">{{item.vice_title}}</text>
						</view>
							<view class="onLine  margin_10rpx_0  font-overflow " style="max-width: 380rpx;">
								<text style="margin-left: 10rpx;">在线时间：{{timeLineFn(item.service_time) }}</text>
							</view>
							<view class="flex-between">
								<view class="flex-start-center">  
									<text  :style="userInfo.level_id!=1 ? 'color: #c5c5c5;font-size:28rpx;margin-right: 10rpx;text-decoration: line-through;' : 'color: red;margin-right: 10rpx;font-size:28rpx;'" >{{item.price}}</text>
									<text v-if="userInfo.level_id!=1" style="color: red;font-size:28rpx;margin-right: 10rpx;">{{(item.price*((Number(basicConfiguration.service_level_discount))/100)).toFixed(2)}}</text>
									
									<text style="color: rgb(153, 153, 153);">{{item.work_time}}/分钟</text>
								</view>
							
								<view class="placeOrder flex">
									<text>立即下单</text>
								</view>
							</view>
						</view>

					</view>
				</view>
			</mescroll-body>
			<view style="height: 140rpx;">

			</view>
		</view>
		<!-- 	<sunui-popup ref="modifyEmployeeInfo">
			<template v-slot:content>

				<view class="moreActiveButton">
					<view class="add" @click.stop="authorityFn(1)">
						距离
					</view>
					<view class="add" @click.stop="authorityFn(2)">
						时间
					</view>
					<view class="add" @click.stop="authorityFn(3)">
						默认
					</view>


				</view>

			</template>
		</sunui-popup> -->

	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		props: ['show', 'sortFilter'],
		components: {

		},
		data() {
			return {
				daziBg1:this.$img.daziBg1,
				suspend: this.$img.suspend,
				sexNan: this.$img.sexNan,
				sexNv: this.$img.sexNv,
				addicon: this.$img.addicon,
				dwBlue: this.$img.dwBlue,
				userInfo: uni.getStorageSync("userInfo"),
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: 0,
				currentIndex: 0,
				heightSystemss: 0,
				cIndex: 0,
				autoplay: true,
				interval: 3000,
				listPoster: [],
				list: [],
				son_tab: null,
				tabsList: [],
				isHost: false,
				cnumber: 0,
				tabs: [],
				pillsBol: true,
				rpxNumber: 40,
				rpxNumber50: 50,
				duration: 0,
				isPaly: false,
				currentIndexMp3: -1,
				sort: '',
				basicConfiguration:{}



			}
		},
		onLoad() {
			// this.tabClassIfyFn()

			// this.createdgetSystemInfo()
			// this.init()

		},
		created() {
			
			this.init()
			this.tabClassIfyFn()
            this.userInfoFns()
			this.basicConfigurationFn()
			// this.createdgetSystemInfo()
			
		},
		onShow() {

			// this.$nextTick(() => {
			// 	this.mescroll?.resetUpScroll();
			// })
		},
		computed: {

			timeLineFn: function() {
				return function(inputString) {
					if (!inputString.includes('小时')) {

						// 分割字符串，获取日期部分和时间部分
						let dateStrings = inputString.split('/');
						console.log(dateStrings)

						// 解析第一个日期时间字符串
						let firstDateTime = dateStrings[0];
						let [firstDate, firstTime] = firstDateTime.split(' ');
						console.log(firstDate, firstTime)
						let [firstYear, firstMonth, firstDay] = firstDate.split('-');
						let firstMonthDay = firstMonth + '-' + firstDay;

						// 解析第二个日期时间字符串
						let secondDateTime = dateStrings[1];
						let [secondDate, secondTime] = secondDateTime.split(' ');
						let [secondYear, secondMonth, secondDay] = secondDate.split('-');
						let secondMonthDay = secondMonth + '-' + secondDay;

						// 构建最终结果
						let result = firstMonthDay + ' ' + firstTime + '/' + secondMonthDay + ' ' + secondTime;

						return result;
					} else {
						return inputString;
					}
				};
			},
		},
		watch: {
			show: function(value) {

				if (uni.getStorageSync("tabClassIfy")) {
					this.son_tab = uni.getStorageSync("tabClassIfy").id
					const findIndex = this.tabs.findIndex((item) => {
						return item == uni.getStorageSync("tabClassIfy").name
					})
					if (findIndex == -1) {
						this.cIndex = -1
						this.pillsBol = false
						this.rpxNumber = 0
						this.rpxNumber50 = 0
					} else {
						this.cIndex = findIndex
					}



					this.$nextTick(() => {
						this.mescroll?.resetUpScroll();
					})

					setTimeout(() => {
						uni.removeStorageSync('tabClassIfy')
					}, 1000)

				} else {
					// this.$nextTick(() => {
					// 	this.mescroll?.resetUpScroll();
					// })
					this.tabClassIfyFn()

					// this.cIndex = 1
				
					// this.$nextTick(() => {

					// 	setTimeout(() => {

					// 		this.cIndex = 0
					// 		console.log(this.cIndex, '’‘’‘’')
					// 	}, 500)


					// })
				}








			},
			sortFilter: function(value) {
				this.sort = value
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

			}
		},

		methods: {
			async userInfoFns() {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {
			
			
			
			
					},
					headers: {
						'Authorization': this.userInfo.token
					}
			
				})
			
				if (result.code == 0) {
					console.log('data', result.data);
				
					wx.setStorageSync('userInfo', result.data);
					// 判断当前是否为会员  获取基础数据折扣价格
				
			
				}
			},
			async basicConfigurationFn() {
				const result = await this.$http.post({
					url: this.$api.config,
					data: {},
					headers: {
			
					}
			
				})
				if (result.code == 0) {
					console.log(result)
					this.basicConfiguration = result.data
			
					wx.setStorageSync('system', result.data);
			
			
				}
			},
			authorityFn(index) {
				if (!(index == 3)) {
					this.sort = index
					this.$refs.modifyEmployeeInfo.close()

				} else {
					this.sort = ''
					this.$refs.modifyEmployeeInfo.close()
				}
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})
			},
			sortFn() {
				this.$emit('serviceSortBol', true)
				// this.$refs.modifyEmployeeInfo.show({
				// 	anim: 'bottom',
				// 	position: 'bottom',
				// 	shadeClose: true, //false使用户不能点击其它关闭页面
				// 	topclose: false,
				// 	zIndex: 10000

				// });
			},
			palyAudioFn(speech, index) {
				this.currentIndexMp3 = index
				// innerAudioContext.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';
				innerAudioContext.src = speech
				// 获取音频时长
				innerAudioContext.autoplay = true;
				innerAudioContext.onCanplay(() => {
					innerAudioContext.duration; // 触发以初始化
					setTimeout(() => {
						this.duration = innerAudioContext.duration.toFixed(0);
						if ('Infinity' == this.duration) {
							this.duration = ''
						}
						console.log(innerAudioContext.duration); // 输出音频时长，单位：秒
					}, 1000); // 设置延时1秒获取
				});
				// 控制播放与暂停
				if (!this.isPaly) {
					console.log('播放');
					// 绑定播放事件
					innerAudioContext.play();
					this.isPaly = true;
					// innerAudioContext.onPlay(() => {
					// 	console.log('开始播放1');
					// 	// innerAudioContext.play();
					// 	this.isPaly = true;
					// });
				} else {
					console.log('暂停');
					// 绑定暂停事件
					innerAudioContext.pause();
					this.isPaly = false;

				}
			},
			goDeatilFn(item) {
				console.log(item)
				this.$sun.navGo('/pagesB/index/serviceDetails', {
					...item
				})


			},
			viewMoreFn() {
				this.$sun.navGo('/pagesB/index/serviceClassifyList')
			},
			isHostFn(id, uid) {

				if (id == uid) {
					return true
				} else {
					return false
				}

			},
			// 点击轮播图
			clickSlideImg(e) {
				// 跳本地 ， 2 跳h5 ，3 跳小程序
				if (e.jump_way == 1) {
					this.$sun.toast('目前暂不支持本地跳转', 'none')
				} else if (e.jump_way == 2) {
					window.location.href = e.link
				}

			},

			async tabClassIfyFn() {

				const resPoster = await this.$http.post({
					url: this.$api.tabList,
					data: {

						type: 3,
						// pid:0,
						top: 1

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {
					console.log(resPoster)
					resPoster.data.list.unshift({
						id: '',
						name: '全部'
					})
					this.tabsList = resPoster.data.list
					if (resPoster.data.list.length) {
						this.son_tab = resPoster.data.list[0].id
						console.log(this.son_tab)
					}
					
					this.tabs = resPoster.data.list.slice(0, 5).map((item) => {
						return item.name;
					});
					this.$nextTick(() => {
						this.cIndex = -1
						this.mescroll?.resetUpScroll();
						setTimeout(() => {
							this.cIndex = 0
						}, 500)
					})


				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			// 获取轮播图
			async init() {
				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {

						type: 6

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {




					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.listPoster = resPoster.data.filter(item => item.type == 6);
					console.log(this.listPoster)




				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}



			},

			getChange(index, e) {
				console.log(index, e)

				this.currentIndex = index

				// this.$sun.navGo('/pages/index/wechatMoments')

			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			changeTab(index, id) {
				console.log('当前选中的项：' + index, id)

				this.cIndex = index
				this.son_tab = id
				this.pillsBol = true
				this.rpxNumber = 40
				this.rpxNumber50 = 50
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

			},
			classifyListNav() {
				console.log('点击了')
				this.$sun.navGo('/pagesB/index/classifyAll', {
					type: 3
				})
			},
			async upCallback(scroll) {

				if (this.son_tab) {
					const result = await this.$http.post({
						url: this.$api.serviceList,
						data: {
							page: scroll.num,
							limit: 100,
							son_tab: this.son_tab,
							oneself_uid: this.userInfo.id ? this.userInfo.id : '',
							service_sort_rule: this.sort,

							dimension: this.userInfo.dimension ? this.userInfo.dimension : '',
							longitude: this.userInfo.longitude ? this.userInfo.longitude : ''



						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})


					if (result.code == 0) {

						this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
						if (scroll.num == 1) this.list = [];

						this.list = this.list.concat(result.data.list);

						this.list.forEach((item) => {

							item.labelList = item.label.split(",")
						})



						console.log('this.list', this.list, this.list.length);
					} else {
						this.$sun.toast(result.message, 'none')
					}
				} else {
					const result = await this.$http.post({
						url: this.$api.serviceList,
						data: {
							page: scroll.num,
							limit: 100,
							son_tab: this.son_tab,

							service_sort_rule: this.sort,
							dimension: this.userInfo.dimension ? this.userInfo.dimension : '',
							longitude: this.userInfo.longitude ? this.userInfo.longitude : ''




						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})


					if (result.code == 0) {

						this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
						if (scroll.num == 1) this.list = [];

						this.list = this.list.concat(result.data.list);

						this.list.forEach((item) => {

							item.labelList = item.label.split(",")
						})



						console.log('this.list', this.list, this.list.length);
					} else {
						this.$sun.toast(result.message, 'none')
					}
				}


			},
		}
	}
</script>

<style lang="less" scoped>
	.tabsPosition {
		position: relative;

		.sortPosition {
			top: 14rpx;
			z-index: 9999;
			right: 0;
			// background-color: #e3edf5;
			position: absolute;
			padding: 0 20rpx;
		}

	}

	.moreActiveButton {


		background-color: #fff;

		.flex-center() {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.moreActiveButton {


			background-color: #fff;


			.add {
				height: 100rpx;
				color: #6568F6;
				font-size: 28rpx;
				font-family: Inter;

				.flex-center();
				border: 2rpx solid #f7f7f7;


			}

			.delete {
				.flex-center();
				height: 100rpx;


				color: #FF4636;
				font-size: 28rpx;
				font-family: Inter;
				box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
			}


		}

		.add {
			height: 100rpx;
			color: #6568F6;
			font-size: 28rpx;
			font-family: Inter;

			.flex-center();
			border: 1px solid #f7f7f7;


		}

		.delete {
			.flex-center();
			height: 100rpx;


			color: #FF4636;
			font-size: 28rpx;
			font-family: Inter;
			box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
		}


	}

	.bgIndex {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: (var(--bg-image));
		// height: 100vh;

		.line {
			width: 10rpx;
			height: 30rpx;
			border-radius: 106rpx;
			margin-right: 10rpx;
			background: rgb(120, 93, 246);
		}

		.serviceList {
         
			margin-top: 20rpx;
			border-radius: 10px;
			// padding: 20rpx;
			height: 293rpx;
			background: rgb(255, 255, 255);

			.tagImg {
				width: 118rpx;
				height: 38rpx;
			}

			.topMounted {

				padding: 5rpx 15rpx;
				height: 36rpx;
				border-radius: 12rpx;
				color: #fff;
				background: rgb(1, 145, 255);
				margin-right: 8rpx;
			}

			.addImg {
				width: 30.02rpx;
				height: 30.02rpx;
				margin-right: 20rpx;
			}

			.location {
				padding: 5rpx 10rpx;
				height: 48rpx;
				border-radius: 20rpx;
				margin-left: 15rpx;
				// background: rgb(235, 245, 255);
			}

			.point {
				background: rgb(68, 215, 182);
				width: 13rpx;
				height: 13rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}

			.tagTitle {
				padding: 10rpx 20rpx;
				height: 36rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				font-size: 20rpx;
				color: rgb(0, 198, 141);
				background: rgb(212, 255, 249);
				margin-right: 5rpx;
			}

			.avaterImg {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}

			.tagTitleGay {
				padding: 10rpx 20rpx;
				height: 36rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				font-size: 20rpx;
				color: #666666;
				background: #F5F5F5;
				margin-right: 5rpx;
			}

			.tagTitleOrange {
				padding: 10rpx 20rpx;
				height: 36rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				font-size: 20rpx;
				color: rgb(238, 100, 41);
				background: rgba(238, 100, 41, 0.13);
				;
				margin-right: 5rpx;
			}

			.tagTitlePink {
				width: 116rpx;
				height: 36rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				font-size: 20rpx;
				color: #F95CEF;
				background: #FFF2F8;
				margin-right: 5rpx;
			}


			.container {
				position: relative;

				.orderImg {

					width: 250rpx;
					height: 293rpx;

					border-radius: 10rpx;



				}

				.tape {
					position: absolute;

					left: 8rpx;
					bottom: 10rpx;
					z-index: 999;
					max-width: 200rpx;
					padding: 0 10rpx;
					height: 50rpx;
					border-radius: 40rpx;
					color: #fff;
					box-shadow: inset 0rpx 2rpx 8rpx 0rpx rgb(201, 134, 255);
					background: linear-gradient(90.00deg, rgb(40, 139, 255) 4.217%, rgb(143, 84, 254) 100%);

					.playerImg {
						width: 30rpx;
						height: 30rpx;
					}

					.audio {
						margin: 0 10rpx;
						display: flex;
						align-items: flex-end;
						justify-content: center;
						height: 50rpx;
						width: 30%;

						.wave {
							width: 7px;
							margin: 0 2px;
							background-color: #4caf50;
							animation: audio-wave 1s infinite ease-in-out;

							&:nth-child(1) {
								animation-delay: 0.1s;
							}

							&:nth-child(2) {
								animation-delay: 0.2s;
							}

							&:nth-child(3) {
								animation-delay: 0.3s;
							}

							&:nth-child(4) {
								animation-delay: 0.4s;
							}

							&:nth-child(5) {
								animation-delay: 0.5s;
							}
						}

						.waveOne {
							width: 7px;
							margin: 0 2px;
							background-color: #4caf50;
							animation: audio-wave 1s 1 ease-in-out;
							animation-fill-mode: both;

							&:nth-child(1) {
								animation-delay: 0.1s;
							}

							&:nth-child(2) {
								animation-delay: 0.2s;
							}

							&:nth-child(3) {
								animation-delay: 0.3s;
							}

							&:nth-child(4) {
								animation-delay: 0.4s;
							}

							&:nth-child(5) {
								animation-delay: 0.5s;
							}
						}
					}

					@keyframes audio-wave {
						0% {

							height: 6px;
							transform: translateY(0px);
							background: #ff8e3a;
						}

						25% {
							height: 6px;
							transform: translateY(0px);
							background: #9c73f8;
						}

						50% {
							height: 10px;
							transform: translateY(-5px) scaleY(1.5);
							background: #ed509e;
						}

						75% {
							height: 6px;
							transform: translateY(0px);
							background: #9c73f8;
						}

						100% {
							height: 6px;
							transform: translateY(0px);
							background: #0fccce;
						}
					}

				}
			}

			.addressImg {
				width: 28.5rpx;
				height: 28.12rpx;
			}

			.onLine {
				width: 380rpx;
				height: 53rpx;
				line-height: 53rpx;
				border-radius: 10px 0px 0px 10px;
				color: rgb(165, 49, 255);

				;
				background: linear-gradient(78.69deg, rgba(165, 49, 255, 0.23) 0.163%, rgba(165, 49, 255, 0) 99.728%);
			}

			.placeOrder {
				color: rgb(255, 255, 255);
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				width: 144rpx;
				height: 54rpx;
				background: linear-gradient(82.59deg, rgb(73, 79, 255) 0.663%, rgb(149, 93, 255) 99.105%);
			}
		}

	}
</style>